<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Sugar Audio Player 1.0</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>


	<div class="player_wrap">
		<div id="interface" class="inter_face">
			<ul>
				<li>
					<a href="#" class="player_control prev">Prev</a>
				</li>
				<li>
					<a href="#" class="player_control play">Play</a>
				</li>
				<li>
					<a href="#" class="player_control pause" style="display:none;">Pause</a>
				</li>
				<li>
					<a href="#" class="player_control next">Next</a>
				</li>
				<li>
					<a href="#" class="player_control stop">Stop</a>
				</li>
				<li class="progress_wrap">
					<div class="progress">
						<div class="load_bar" style="width:100%;"></div>
						<div class="play_bar" style="width:10%;"></div>
					</div>
					<div class="time">
						<span class="play_time">00:00</span>
						<span class="total_time">00:00</span>
					</div>
				</li>
				<li class="volume_wrap">
					<a id="setVolumeMin" href="#" class="volume_min">Min</a>
					<div class="volume_bar">
						<div id="volumeValue" class="volume_value"></div>
					</div>
					<a id="setVolumeMax" href="#" class="volume_max">Max</a>
				</li>
			</ul>
		</div>
		<!--
		<div id="playlist" class="play_list">
			<ul>
				<li class="play_current">
					<a href="#">我想有个家</a>
				</li>
				<li>
					<a href="#">我想有个家</a>
				</li>
				<li class="last">
					<a href="#">我想有个家</a>
				</li>
			</ul>
		</div>
		-->
	</div>
	<!--<div class="cover"></div>-->
	<!--<div id="dropArea" class="drop">亲，拖到这里吧~</div>-->
	<script type="text/javascript" src="js/pf.js"></script>
	<script type="text/javascript" src="js/sugarAudio.js"></script>
	
	<script type="text/javascript">
	
	/*
	(function() {
		var setMax = $I("#setVolumeMax"),
			setMin = $I("#setVolumeMin"),
			volumeValue = $I("#volumeValue"),
			dropArea = $I("#dropArea"),
			audioPlayer = $I("#audioPlayer");
			
		$_addHandler(setMax, "click", function() {
			$_setStyle(volumeValue, "width", "46px");
			return setMax;
		});
		$_addHandler(setMin, "click", function() {
			$_setStyle(volumeValue, "width", "0");
			return setMin;
		});	
		
		
		if (File) {
			
			$_addHandler(dropArea, "dragenter", function(e) {
				pf.event.preventDefault(e);
				pf.event.stopPropagation(e);
				
				$_setStyle(dropArea, "border-style", "dashed");
			});	
			
			$_addHandler(dropArea, "dragleave", function(e) {
				pf.event.preventDefault(e);
				pf.event.stopPropagation(e);
				
				$_setStyle(dropArea, "border-style", "solid");
			});
			
			$_addHandler(dropArea, "dragover", function(e) {
				pf.event.preventDefault(e);
				pf.event.stopPropagation(e);
			});	
			
			$_addHandler(dropArea, "drop", function(e) {
				pf.event.preventDefault(e);
				pf.event.stopPropagation(e);
				$_setStyle(dropArea, "border-style", "solid");
				
				
				
				var audio = document.createElement("audio");
				var fileList = e.dataTransfer.files;
				var file = fileList[0];
				 var url;
                    if(window.createObjectURL){
                      url = window.createObjectURL(file)
                    }else if(window.createBlobURL){
                      url = window.createBlobURL(file)
                    }else if(window.URL && window.URL.createObjectURL){
                      url = window.URL.createObjectURL(file)
                    }else if(window.webkitURL && window.webkitURL.createObjectURL){
                      url = window.webkitURL.createObjectURL(file)
                    }
				audio.src = url;
                audio.play();
				audioPlayer.innerHTML ="";
				audioPlayer.appendChild(audio);
				//console.log(file.mozFullPath);
				//var audio = document.createElement("audio");
				//audio.src = window.URL.createObjectURL(file);
				//console.log(audio.src);
				//
				
				/*
				for (var i = 0, j = fileList.length; i < j; i++) {
					//console.log(window.URL.createObjectURL(fileList[i]));
					
				
				}
				*/
			/*	
				
			});	
		
		} else {
			alert("亲，你的浏览器不给力哇，升级下哦~");
		}
	})();	
		
		*/
		
	var audioPlayer = new SugarAudioPlayer('#dropArea');
	
	</script>
</body>
</html>